@import '../../edit-main.less';

.app-phone-scroll {
    flex: 1;
    width: calc(@phoneWidth + 8px);
    margin-left: -4px;
    position: relative;
    .app-phone-bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 4px;
        width: calc(100% - 8px);
        z-index: -1;
        background-repeat: repeat;
        background-size: 100% 100%;
    }
    & > ::v-deep(.el-scrollbar__wrap) {
        .el-scrollbar__view {
        }
    }
    & > ::v-deep(.el-scrollbar__bar) {
        position: fixed;
        right: -12px;
        margin-top: 42px;
    }
}

.app-phone-content {
    width: @phoneWidth;
    margin: -10px auto;
    padding: 10px 0;
    box-sizing: border-box;
    &-footer {
        &::before, &::after {
            content: '';
            display: block;
            width: 100%;
            height: 10px;
        }
    }
    .add-widget-btn {
        display: block;
        margin: 0 auto;
        width: 94%;
        line-height: 42px;
        color: #c1c1cc;
        border: 1px dashed;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        position: relative;
        &:hover {
            border-color: var(--edit-color-primary);
            color: var(--edit-color-primary);
        }
    }
}